<!DOCTYPE html>
<html>
<head>
    <title>Demonstrating &lt;template&gt;</title>
    <style>
      /* Not necessary, just a little bit of CSS to prevent our table from looking abhorrent */
      table {
        background: #000;
      }
      table td
      {
        background: #fff;
      }
    </style>
</head>
<body>
<h1>Products</h1>
<table id="producttable">
    <thead>
    <tr>
        <td>UPC_Code</td>
        <td>Product_Name</td>
    </tr>
    </thead>
    <tbody>
    <!-- any existing data can be put here -->
    </tbody>
</table>

<template id="productrow">
    <tr>
        <td class="record"></td>
        <td></td>
    </tr>
</template>

<script>
    // Test to see if the browser supports the HTML template element by checking
    // for the presence of the template element's content attribute.
    if ('content' in document.createElement('template')) {

      // Instantiate the table with the existing HTML tbody and the row with the template
      var t = document.querySelector('#productrow'),
      td = t.content.querySelectorAll("td");
      td[0].textContent = "1235646565";
      td[1].textContent = "Stuff";

      // Clone the new row and insert it into the table
      var tb = document.getElementsByTagName("tbody");
      var clone = document.importNode(t.content, true);
      tb[0].appendChild(clone);

      // Create a new row
      td[0].textContent = "0384928528";
      td[1].textContent = "Acme Kidney Beans";

      // Clone the new row and insert it into the table
      var clone2 = document.importNode(t.content, true);
      tb[0].appendChild(clone2);

    }
    else {
      // Find another way to add the rows to the table because
      // the HTML template element is not supported.
    }
    </script>
</body>
</html>